import { Toast } from "antd-mobile";
import React from "react";
import { useNavigate } from "react-router-dom";
import * as img from "../assets/image";
import Store from "./store";
import { sendMessage, gotoPage } from "./utils";
import { payURL } from "../config";
import { Dialog } from "antd-mobile";

export default function Home() {
    const { store } = Store.useContainer();
    const navigate = useNavigate();
    const onRouter = () => {
        navigate(store.isLogin ? "/person" : "/login");
    };

    return (
        <>
            <div
                className="bg"
                style={{ backgroundImage: `url(${img.home_bg})` }}
            >
                <div
                    className="connect_bg"
                    style={{ backgroundImage: `url(${img.home_img})` }}
                >
                    <Header onRouter={onRouter} />
                    <Connect />
                    <Auto />
                    <Footer />
                </div>
            </div>
        </>
    );
}

function Header(props: any) {
    return (
        <div className="header">
            <img className="img" onClick={props.onRouter} src={img.icon_user} />{" "}
            <div className="title">菠萝VPN</div>
        </div>
    );
}

function Connect() {
    const navigate = useNavigate();
    const { store } = Store.useContainer();
    const { connected, currentLine, nodesChanged } = store;

    const proxyCreate = () => {
        if (!currentLine.NodeName) {
            Toast.show("当前线路不能为空！");
            return;
        }
        //
        if (nodesChanged) {
            sendMessage({ func: "syncNodesCreateProxy", data: currentLine })
                .then((check) => {
                    if (check) {
                        Dialog.confirm({
                            content: "当前为VIP线路，是否购买VIP",
                            onConfirm: () => {
                                navigate("/product");
                            },
                        });
                    }
                })
                .catch((e) => {
                    Toast.show(e);
                });
        } else {
            sendMessage({ func: "localNodesCreateProxy", data: currentLine })
                .then((check) => {
                    if (check) {
                        Dialog.confirm({
                            content: "当前为VIP线路，是否购买VIP",
                            onConfirm: () => {
                                navigate("/product");
                            },
                        });
                    }
                })
                .catch((e) => {
                    Toast.show(e);
                });
        }
    };

    const proxyClose = () => {
        sendMessage({ func: "closeProxy" });
    };

    if (!connected) {
        return (
            <div className="connect" onClick={proxyCreate}>
                <div
                    className="connect_bg"
                    style={{ background: `url(${img.start_bg})` }}
                >
                    <div
                        className="connect_btn"
                        style={{ background: `url(${img.start_off_btn})` }}
                    >
                        <img
                            className="connect_point"
                            src={img.start_off_point}
                        />
                    </div>
                </div>

                <div className="connect_text_off">CONNECT OFF</div>
            </div>
        );
    } else {
        return (
            <div className="connect" onClick={proxyClose}>
                <div
                    className="connect_bg"
                    style={{ background: `url(${img.start_bg})` }}
                >
                    <div
                        className="connect_btn"
                        style={{ background: `url(${img.start_on_btn})` }}
                    >
                        <img
                            className="connect_point"
                            src={img.start_on_point}
                        />
                    </div>
                </div>
                <div className="connect_text_on">CONNECTED</div>
            </div>
        );
    }
}

function Auto() {
    const { store } = Store.useContainer();
    const { currentLine } = store;
    const navigate = useNavigate();
    const onRouter = () => {
        navigate("/line");
    };

    return (
        <div className="auto" onClick={onRouter}>
            <div className="auto_left">
                {currentLine.Addr ? (
                    <>
                        <img src={currentLine.Icon} width={24} height={24} />{" "}
                        <div className="auto_left_text">
                            {currentLine.NodeName}-{currentLine.LineName}
                        </div>
                    </>
                ) : (
                    <div className="auto_left_text">当前线路为空</div>
                )}
            </div>
            <div className="auto_right">
                <img src={img.icon_arrow_orange} />
            </div>
        </div>
    );
}

function Footer() {
    const onRouter = () => {
        gotoPage(payURL);
    };
    return (
        <div className="footer" onClick={onRouter}>
            <div className="footer_box">
                <img src={img.icon_windows} />
                <img src={img.icon_android} />
                <img src={img.icon_chrome} />
                <img src={img.icon_mac} />
            </div>
        </div>
    );
}
